<template>
	<div class="addcard">
		
		<div class='head'>
            <p class='title-icon'>
            	<a class='iconfont icon-jiantouzuo' href="javascript:history.go(-1)"></a>
            </p>
            <p class='title-text'>绑定银行卡</p>
            <p class="title-null"></p>
        </div>
        
        <div class="content">
        	<div>
        		<p class="left">持卡人</p>
        		<input class="right" type="text" placeholder='请输入持卡人姓名'/>
        	</div>
        	<div>
        		<p class="left">卡号</p>
        		<input class="right" type="text" placeholder='请输入卡号'/>
        	</div>
        	<div>
        		<p class="left">卡类型</p>
        		<select class="right">
        			<option class="potion1" value="">请选择银行卡类型</option>
        			<option value="">储蓄卡</option>
        			<option value="">借记卡</option>
        			<option value="">信用卡</option>
        		</select>
        	</div>
        	<div>
        		<p class="left">手机号</p>
        		<input class="right" type="text" placeholder='请输入银行卡预留手机号'/>
        	</div>
        	<div>
        		<p class="left">验证码</p>
        		<p class="right">
	        		<input class="yzm" type="text" placeholder='请输入验证码'/>
	        		<span class="yzm-text">发送验证码</span>
        		</p>
        	</div>
        </div>
        
        <div class="submit">
        	<p class="info-submit">
	        		<router-link to='/home'>确认绑定</router-link>
	        	</p>
        </div>
        
	</div>
</template>

<script>
</script>

<style scoped>
	.content{
		width: 90%;
		margin: 30px auto;
		background-color: white;
		padding: 0px 10px 0px 10px ;
	}
	.content > div{
		display: flex;
		height: 40px;
		line-height: 40px;
		border-bottom: #EBEBEB 1px solid;
	}
	.left{
		width: 20%;
	}
	.right{
		width: 75%;
	}
	input,select{
		border: none;
	}
	.select:focus{
		border: 0px;
		outline: none;
		
	}
	.yzm{
		width: 50%;	
	}
	.yzm-text{
		color: #71B4EB;
	}
	.submit{
		margin: 20px auto;
		width: 90%;
	}
	.potion1{
		color: #cccccc;
	}
</style>